<template>
  <div class="div-wrapper direction-wrapper">
    <div class="container">
      <div class="title">
        {{$store.state.language === 'zh-CN' ? "研究方向" : "Direction"}}
      </div>
      <div v-if="$store.state.language === 'zh-CN'" class="content ql-editor" v-html="contentDirection">
        {{contentDirection}}
      </div>
      <div v-else class="content ql-editor" v-html="enContentDirection">
        {{enContentDirection}}
      </div>
      <div class="title">
        {{$store.state.language === 'zh-CN' ? "项目课题" : "Project"}}
      </div>
      <div v-if="$store.state.language === 'zh-CN'" class="content ql-editor" v-html="contentProject">
        {{contentProject}}
      </div>
      <div v-else class="content ql-editor" v-html="enContentProject">
        {{enContentProject}}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import $api from '../../api';
import { Loading , Notification} from 'element-ui';

@Component
export default class Direction extends Vue{
  private contentDirection: string = '';
  private enContentDirection: string = '';
  private contentProject: string = '';
  private enContentProject: string = '';
  private targetNameDirection: string = 'research_direct';
  private targetNameProject: string = 'research_project';

  private mounted() {
    this.getContent();
  }
  private getContent() {
    const loadInstance = Loading.service({target: '.ql-editor'});
    $api.module.findContentByName(this.targetNameDirection)
        .then((res) => {
          this.contentDirection = (res as any).content;
          loadInstance.close();
        }).catch((error) => {
      loadInstance.close();
      Notification({
        title: '网络异常',
        message: error,
        type: 'error',
      });
    })
    $api.module.findContentByName('en_' + this.targetNameDirection)
        .then((res) => {
          this.enContentDirection = (res as any).content;
        })

    $api.module.findContentByName(this.targetNameProject)
        .then((res) => {
          this.contentProject = (res as any).content;
          loadInstance.close();
        }).catch((error) => {
      loadInstance.close();
      Notification({
        title: '网络异常',
        message: error,
        type: 'error',
      });
    })
    $api.module.findContentByName('en_' + this.targetNameProject)
        .then((res) => {
          this.enContentProject = (res as any).content;
        })
  }
}
</script>